<!DOCTYPE html>
<html>

<head>
    <title>富文本</title>
    <style type="text/css" media="screen">
    .editor_believer {
        width: 450px;
        border: solid 1px lightgray;
    }

    .execBtns {
        width: 100%;
        background: lightgray;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;
        padding: 10px 0;
    }

    .execBtns button,
    .execBtns select {
        width: 80px;
        margin: 5px;
        border: none;
    }

    .editor {
        margin-top: 20px;
        height: 500px;
        width: 100%;
    }

    img {
        width: 100%;
        display: block;
    }

    .hiddenInput {
        display: none;
    }
    </style>
</head>

<body onload="listenEditorClick()">
    <div class="editor_believer">
        <div class="execBtns">
            <button onclick="execCommandFunc('undo')">撤销</button>
            <button onclick="execCommandFunc('redo')">恢复</button>
            <button onclick="execCommandFunc('bold')">加粗</button>
            <button onclick="chooseLocalImg()">
                本地图片
                <input type="file" accept="image/jpeg, image/png" class="hiddenInput" onchange="onFileChange(event)" />
            </button>
            <button onclick="execCommandInsertLink('insertImage')">在线图片</button>
            <button onclick="execCommandInsertLink('createLink')">插链接</button>
            <button onclick="execCommandFunc('formatblock','<BLOCKQUOTE>')">引用</button>
            <button onclick="execCommandFunc('insertUnorderedList')">无序列表</button>
            <button onclick="execCommandFunc('insertHorizontalRule')">水平线</button>
            <button onclick="execCommandFunc('formatblock','<P>')">清除格式</button>
            <button onclick="selectorController()">选中内容</button>
            <select name="execList" onchange="handleExecListChange(this.value)">
                <option value="">标题</option>
                <option value="formatblock,<H1>">一级标题</option>
                <option value="formatblock,<H2>">二级标题</option>
                <option value="formatblock,<H3>">三级标题</option>
                <option value="formatblock,<H4>">四级标题</option>
                <option value="formatblock,<H5>">五级标题</option>
                <option value="formatblock,<H6>">六级标题</option>
            </select>
            <select name="fontSize" onchange="handleExecListChange(this.value)">
                <option value="">字号</option>
                <option value="fontSize,7">7号</option>
                <option value="fontSize,6">6号</option>
                <option value="fontSize,5">5号</option>
                <option value="fontSize,4">4号</option>
                <option value="fontSize,3">3号</option>
                <option value="fontSize,2">2号</option>
                <option value="fontSize,1">1号</option>
            </select>
        </div>
        <div contenteditable="true" class="editor"></div>
        <button onclick="handleSubmit()">提交</button>
        <button onclick="handleClean()">清空</button>
    </div>
    <script type="text/javascript">
    function execCommandFunc(commandName, valArg = null) {
        document.execCommand(commandName, false, valArg)
    }

    function handleExecListChange(commandArgs = '') {
        if (!commandArgs) {
            return;
        }
        let keyVal = commandArgs.split(',');
        const [a, b] = keyVal;
        execCommandFunc(a, b);
    }

    function execCommandInsertLink(commandName) {
        let url = window.prompt('请输入网址｜图片链接地址');
        if (url) {
            execCommandFunc(commandName, url);
        }
    }

    function selectorController(arg = '') {
        const selCtrl = window.getSelection();
        let range = selCtrl.getRangeAt(0);
        const { collapsed, startOffset, endOffset, commonAncestorContainer } = range;
        console.log('collapsed, startOffset, endOffset, commonAncestorContainer:', collapsed, startOffset, endOffset, commonAncestorContainer);
    }

    function handleSubmit() {
        let html = document.querySelector('.editor').innerHTML;
        console.log(html)
    }

    function handleClean() {
        if (confirm('Are you sure?')) {
            document.querySelector('.editor').innerHTML = '';
        }
    }

    function chooseLocalImg() {
        document.querySelector('.hiddenInput').click();
    }

    function onFileChange(e) {
        let reader = new FileReader();
        let file = e.target.files[0];

        reader.onload = () => {
            let base64Img = reader.result;
            execCommandFunc('insertImage', base64Img);
            document.querySelector('.hiddenInput').value = '';
        };

        reader.readAsDataURL(file);
    }

    function listenEditorClick() {
        //监听图片点击事件
        document.querySelector('.editor').addEventListener('click', function(e) {
            console.log('e:', e)
            if (e && e.target && e.target.tagName && e.target.tagName == 'IMG') {
                // const { scrollLeft, scrollTop, scrollWidth, scrollHeight } = e.target;
                // console.log('点击了图片 scrollLeft,scrollTop,scrollWidth,scrollHeight:', scrollLeft, scrollTop, scrollWidth, scrollHeight);
                createImgOverlay(.target)
            }
        })
    }

    function createImgOverlay(theImg) {
        let imgRect = theImg.getBoundingClientRect();
        let editorRect = document.querySelector('.editor').getBoundingClientRect();
        console.log('imgRect:', imgRect)
        console.log('editorRect:', editorRect)
        let divLayer = document.createElement('div');
        
    }
    </script>
</body>

</html>